<template>
  <div v-resize="handleResize">
    <base-info ref="baseInfo" />
    <Card :bordered="false" dis-hover class="dashboard-console-visit">
      <template #title>
        <Row type="flex" justify="center" align="middle">
          <Col span="8">
            <Avatar
              icon="ios-podium"
              size="small"
              v-color="'#1890ff'"
              v-bg-color="'#e6f7ff'"
            />
            <span class="ivu-pl-8">访问量</span>
          </Col>
          <Col span="16" class="ivu-text-right">
            <RadioGroup
              v-model="visitType"
              type="button"
              class="ivu-mr-8"
              @on-change="handleChangeVisitType"
            >
              <Radio label="day">今日</Radio>
              <Radio label="month">本月</Radio>
              <Radio label="year">全年</Radio>
            </RadioGroup>
            <DatePicker
              v-model="visitDate"
              type="daterange"
              placement="bottom-end"
              placeholder="选择日期"
              style="width: 200px"
              :clearable="false"
              @on-change="datePickerChange"
            ></DatePicker>
          </Col>
        </Row>
      </template>
      <div>
        <visit-chart ref="visitChart" />
      </div>
    </Card>
  </div>
</template>
<script>
import baseInfo from './base-info'
import visitChart from './visit-chart'
export default {
  name: 'modalName',
  components: { baseInfo, visitChart },
  data () {
    return {
      visitType: 'day', // day, month, year
      visitDate: [(new Date()), (new Date())]
    }
  },
  methods: {
    // 监听页面宽度变化，刷新表格
    handleResize () {
      // this.$refs.baseInfo.handleResize(this.visitDate);
      // this.$refs.visitChart.handleResize(this.visitDate);
    },
    handleChangeVisitType (val) {
      if (val === 'day') {
        this.visitDate = [(new Date()), (new Date())]
        this.$refs.baseInfo.handleResize(this.visitDate)
        this.$refs.visitChart.handleResize(this.visitDate)
      } else if (val === 'month') {
        let date = new Date()
        this.visitDate = [(new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-01')), (new Date())]
        this.$refs.baseInfo.handleResize(this.visitDate)
        this.$refs.visitChart.handleResize(this.visitDate)
      } else if (val === 'year') {
        let date = new Date()
        this.visitDate = [(new Date(date.getFullYear() + '-01-01')), (new Date())]
        this.$refs.baseInfo.handleResize(this.visitDate)
        this.$refs.visitChart.handleResize(this.visitDate)
      }
    },
    datePickerChange (arr) {
      this.visitDate = [(new Date(arr[0])), (new Date(arr[1]))]
      this.$refs.baseInfo.handleResize(this.visitDate)
      this.$refs.visitChart.handleResize(this.visitDate)
    }
  },
  mounted () {
    this.$refs.baseInfo.handleResize(this.visitDate)
    this.$refs.visitChart.handleResize(this.visitDate)
  },
};
</script>
<style lang='less' scoped>
</style>